﻿@model MovingFromPartialViews.Models.IndexModel

<div class="container">
    <div class="hero-unit">
        <h1>Sample application</h1>
        <p>This sample application is used to demonstrate how to bind client-side
            javascript view models using the knockout.js library.
        </p>
        <p>The details of this example and explanations can be found <a href="http://visualstudiomagazine.com/articles/2013/08/12/javascript-data-binding-with-knockout.aspx">at</a></p>
		<p>Coffee script explanation can be found <a href="http://visualstudiomagazine.com/articles/2013/10/01/top-7-reasons-to-love-coffeescript.aspx">at</a></p>
    </div>    
</div>

<div class="container">
    <div data-bind="foreach: categories">
        <div class="row category">
            <div class="span12" data-bind="text: name"></div>
        </div>
        <div data-bind="foreach: subscriptions">
            <div class="row" data-bind="css: subStatus">
                <div class="offset1 span6" data-bind="text: displayName"></div>
                <div class="span2">
                    <button class="btn btn-mini" type="button" data-bind="click: $parent.removeItem">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <div id="addItem">
        <div class="row">
            <div class="span3">
                <select data-bind="options: categoryNames, value: selectedCategory"></select>
            </div>
            <div class="span9">
                <div class="input-append">
                    <input type="text" class="span8" data-bind="value: itemName"/>
                    <button class="btn btn-primary" data-bind="click: addNewItem">Add</button>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    <script src="/Scripts/app/category.js" type="text/javascript"></script>
    <script src="/Scripts/app/subscription.js" type="text/javascript"></script>
    <script src="/Scripts/app/mainViewModel.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var serverModel = @Html.Raw(Json.Encode(Model));
            var viewModel = new mainViewModel(serverModel);
            ko.applyBindings(viewModel);
        });
    </script>
}
